<template>
  <div class="wrap">
    <div class="ti">数据中心 >></div>
    <div v-for="(it,index) in navList" :key="it.id" :class="ctNavID == it.id ? 'actionStyle nav' : 'nav'" @click="handleClickNav(it)"  > 
      <span>{{it.label}}</span>
      <br />
      <span class="count">{{it.count}}</span>  
      <span v-if="index != 4" class="line"></span>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

import {thousands} from '@/utils/utils'
export default {
  components: { },
  data() {
    return {
      ctNavID: 'patent',//菜单标识
      keyword:'',
      navList:[
        {
          id:'patent',
          label:'专利库',
          count:''
        },
        {
          id:'paper',
          label:'文献库',
          count:''
        },
        {
          id:'achieve',
          label:'成果库',
          count:''
        },
        {
          id:'project',
          label:'项目库',
          count:''
        },
        {
          id:'standard',
          label:'标准库',
          count:''
        }
      ]
    };
  },
  beforeMount() {
    this.ctNavID = this.$route.query.type || 'patent'
    this.getOverview()
  },
  watch:{
    $route(){
      this.ctNavID = this.$route.query.type
    }
  },
  computed: {
  },
  methods: {
    handleClickNav(it){
      this.ctNavID = it.id
      this.$router.push({
        name: 'DCMain',
        query: {
          type: it.id,
        }
      })
    },
    // 获取数据展示
    getOverview() {
      // 重置
      this.navList.forEach(v => {
        v.count = 'loading'
      })
      this.$get(this.$Url.IR.overview, {
        keyword: ''
      }).then(res => {
        let data = res.data
        this.navList.forEach(v => {
          switch(v.label){
            case '专利库':
              v.count = thousands(data.patent) || '暂无'
              break;
            case '文献库':
              v.count = thousands(data.paper) || '暂无'
              break;
            case '成果库':
              v.count = thousands(data.achieve) || '暂无'
              break;
            case '项目库':
              v.count = thousands(data.project) || '暂无'
              break;
            case '标准库':
              v.count = thousands(data.standard) || '暂无'
              break;
            default:
              break;
          }
        })
      }).catch(err => {})
    },
  },
};
</script>
<style lang="scss" scoped>
  .wrap{
    background: $mainColor;
    height: 0.6rem;
    width: 100%;
    color: #fff;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 0.16rem;
    padding: 10px;
    position: fixed;
    top: 0.7rem;
    left: 0;
    z-index: 9;
    .nav{
      height: 0.6rem;
      padding-top: 0.1rem;
      width: 1.5rem;
      text-align: center;
      position: relative;
      cursor: pointer;
      &:hover{
        background: #f29d70;
      }
      .count{
        font-size: 0.12rem;
      }
    }
    .actionStyle{
      background: #f29d70;
      .count{
        font-size: 0.12rem;
      }
    }
    .ti{
      height: 0.4rem;
      width: 1.5rem;
      line-height: 0.4rem;
      text-align: center;
      border-right: 2px solid #fff;
    }
    .line{
      height: 70%;
      width: 1px;
      background: #fff;
      position: absolute;
      right: 0;
      top: 10px;
    }
  }
</style>


